<template>
	<view class="catetory">
		<!-- 左侧分类,noScorll 在common.css中定义了不显示滚动条，scroll-y纵向显示 -->
		<scroll-view class="left noScorll" scroll-y>
			<view class="title column center">
				<!-- 点击事件加上 stop ,防止触发父组件元素事件（搜索页） -->
				<view v-for="(item, index) in categoryList" :key="index" @click.stop="getLabel(index, item)"
					:class="{'active': index === activeIndex}">
					{{item.name}}
				</view>
			</view>
		</scroll-view>

		<!-- 右侧分类对应的标签信息-->
		<scroll-view class="right" scroll-y>
			<view class="tag">
				<view v-for="(item, index) in labelList" :key="index" @click.stop="clickLabel(item)">
					{{ item.name }}
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import api from '@/api/course.js'

	export default {
		props: {
			// 如果搜索页传递了对象，子组件可直接修改此对象中的属性，父组件会同步更新
			value: {
				type: Object,
				default: () => {}
			}
		},

		data() {
			return {
				categoryList: null, // 左侧分类列表数据
				activeIndex: 0, // 当前选中
				labelList: [], // 右侧标签列表数据
			}
		},

		onLoad() {
			// 初始化数据
			this.getList()
		},

		methods: {
			// 点击标签,跳转搜索页面
			clickLabel(item) {
				// 点击搜索页的 `全部分类`会传递value值 ++++++++++
				if (this.value) {
					//搜索页选择标签
					this.searchPageChangeLabel(item)
					return
				}
				// activeIndex 选中分类下标，方便父组件重新选择分类时，默认选中当前分类
				const params = {
					labelId: item.id,
					name: item.name,
					activeIndex: this.activeIndex
				}
				uni.navigateTo({
					url: `/pages/search/search?params=${ JSON.stringify(params) }`
				})
			},

			// 搜索页弹出分类窗口，选择标签
			searchPageChangeLabel(item) {
				// 当前点击与上一次点击相同，则不处理
				// this.value.name上一次的名称，item.name是当前标签名，item.cname是当前分类名（左侧`全部分类`）
				if (this.value.name !== item.name && this.value.name !== item.cname) {
					// 赋值给搜索面显示名称，如果有分类名就取分类名，没有就取标签名
					this.value.name = item.cname || item.name
					// 标签id
					this.value.id = item.id || null
					// 分类id (点击`不限`是分类id，)
					this.value.categoryId = item.categoryId || null

					// 解决父组件，搜索新数据
					this.$emit('searchByLabel', this.value)
				}
				// 关闭弹窗
				this.value.active = false
			},
			// 注意：labelId放到第1个位置，后面解析时要用，顺序一定不能乱
			async getList() {
				// 查询分类及标签, 不要少了async、await
				const {
					data
				} = await api.getCategoryList()
				this.categoryList = data

				// 点击搜索页的 `全部分类`会传递value值 +++++++++++++++++
				if (this.value) {
					// console.log('this.value', this.value)
					// 每个分类下的标签数组中添加`不限`标签(点击不限，就是查询这个分类下的信息)
					this.categoryList.forEach((item) => {
						// name是弹窗列表中显示；cname 分类名称，用于点击回显当前分类名；
						// categoryId 分类id， 作为搜索条件
						item.labelList.unshift({
							id: null,
							name: '不限',
							cname: item.name,
							categoryId: item.id
						})
					})
					this.categoryList.unshift({
						id: null,
						name: '全部分类'
					})

					// 之前是否有选中分类（从分类页面过来就会有），有则选中（上面有追加一个新元
					// 素， 所以要 + 1 往后选中）
					this.activeIndex = this.value.activeIndex > -1 ?
						this.value.activeIndex + 1 : this.activeIndex
				}

				// 获取当前选中的标签列表
				this.getLabel(this.activeIndex)
			},
			getLabel(index, item) {
				// 选中样式
				this.activeIndex = index
				// 获取点击的分类对象
				// 2. 重构模板代码动态渲染数据
				// 搜索页面基本功能实现
				// 需求
				// 1. 点击首页搜索框进入搜索页
				// 2. 点击分类页面右上角搜索按钮和标签名进入搜索页
				const activeCategory = this.categoryList[index]
				// 分类对应的标签列表
				this.labelList = activeCategory.labelList
			},

			// 点击标签,跳转搜索页面
			clickLabel(item) {

			}

		},







	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.catetory {
		display: flex;
		height: 100%;

		.left {
			width: 200rpx;
			background-color: #F8F9FB;
			border-radius: 0 25rpx 25rpx 0;

			.title {
				view {
					color: #000;
					text-align: center;
					font-size: 30rpx;
					color: #888888;
					width: 200rpx;
					line-height: 40rpx;
					padding: 55rpx 30rpx;
					position: relative;

					&:before {
						// 在.title 分类前加上内容 |
						position: absolute;
						content: '';
						width: 0rpx;
						height: 0rpx;
						border-right: 6rpx solid $uni-color-primary;
						border-radius: 30rpx;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						transition: .3s;
					}
				}

				.active {
					// color: $mxg-text-color-blue;
					font-size: 33rpx;
					font-weight: bold;

					&:before {
						height: 50rpx;
					}
				}
			}
		}

		.right {
			// 铺满
			margin: 0;
			background-color: #fff;
			padding-left: 15rpx;

			.tag {
				display: flex;
				flex-wrap: wrap;
				/* 排不下，换行 */
				padding-top: 35rpx;
				padding-left: 10rpx;

				view {
					font-size: 25rpx;
					line-height: 60rpx;
					text-align: center;
					border: 1rpx solid #999;
					border-radius: 30rpx;
					min-width: 160rpx;
					padding: 0 5rpx;
					margin: 15rpx 5rpx;
				}
			}
		}
	}
</style>
